<template>
	<view>
		<!-- 顶部我的收入内容 -->
		<view class="top-nav">
			<view style="width: 100rpx;"><text>
					 </text>
			</view>
			<view><text>我的收入</text></view>
			<view style="font-size: 20rpx;"><text @click="jump()">银行卡</text></view>
		</view>
		<!-- 我的收入详情内容 -->
		<view class="content">
			<view class="shouru">收入总览</view>
			<view class="price">￥{{u.user.balance}}</view>
			<view class="bottom">
				<view class="bottom-left">
					<text>+1021.34</text>
					<text>本月收入</text>
				</view>
				<view class="bottom-right">
					<text>0.00</text>
					<text>待结算</text>
				</view>
			</view>
		</view>
		<!-- 待结算的运单内容 -->
		<view class="waybill">
			<view class="jiesuan">
				<image src="/photo/my/jiezhang.png"></image>
				<text>待结算的运单</text>
			</view>
			<view class="jiantou">
				<image src="/photo/my/right.png" @click="waybill()"></image>
			</view>
		</view>
		<!-- 收支明细内容 -->
		<view class="waybill">
			<view class="jiesuan01">
				<image src="/photo/my/zhangben.png"></image>
				<text>收支明细</text>
			</view>
			<view class="jiantou">
				<image src="/photo/my/right.png" @click="expenditure()"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	//引入存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	const u = userStore();
	console.log(u.user.balance)
	
//点击银行卡跳转至银行卡列表页面
const jump = () =>{
	uni.navigateTo({
		url: '/pages/bankCardList/bankCardList'
	})
}

const waybill = () =>{
	uni.navigateTo({
		url: '/pages/yundan/yundan'
	})
}

const expenditure = () =>{
	uni.navigateTo({
		url: '/pages/expenditureDetails/expenditureDetails'
	})
}
</script>

<style lang="scss" scoped>
	//------------------------------顶部导航----------------------------------
	//顶部我的收入样式
	.top-nav {
		display: flex;
		justify-content: space-between;
		background-color: rgba(0, 47, 147, 0.9);
		color: white;
		padding: 10rpx;
	}

	//--------------------------------我的收入详情内容视图样式------------------------
	//我的收入详情内容样式
	.content {
		height: 350rpx;
		background-color: rgba(0, 47, 147, 0.9);
		color: white;

		//收入的盒子视图
		.shouru {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100rpx;
			font-size: 30rpx;
		}

		//收入的总计盒子视图
		.price {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 120rpx;
			font-size: 60rpx;
		}

		//底部本月收入 以及待结算的盒子视图样式
		.bottom {
			display: flex;
			justify-content: space-around;
			font-size: 30rpx;

			//本月收入视图容器样式
			.bottom-left {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			//待结算视图容器样式
			.bottom-right {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	//---------------------------------------待结算的运单样式--------------------------
	//待结算视图容器样式
	//收支明细与待结算共用同一个样式
	.waybill {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		//设置结算盒子的样式
		.jiesuan {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}

		//由于收支明细的图片与待结算的运单图片大小不可共用  稍有改动
		//收支明细
		.jiesuan01 {
			display: flex;
			align-items: center;
			margin-left: 15rpx;
		}

		//待结算的运单  结账图标样式
		.jiesuan image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}

		//收支明细  账本样式
		.jiesuan01 image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}

		//文本样式
		.jiesuan text {
			line-height: 80rpx;
		}

		//右侧箭头样式
		.jiantou image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
	}
</style>